
<template>
<!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>公告</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!--  数据表格-->
  <div style="margin:20px">
      <h2>公告速递</h2>
      <hr>
    <el-table :data="noticeInfo">
      <el-table-column prop="id" label="序号" width="55px" v-if="show"/>
      <el-table-column prop="title" label="标题" width="150px"/>
      <el-table-column prop="publishdt" label="发布时间" />
      <el-table-column prop="identity" label="发布人" />
      <el-table-column prop="ispublic" label="状态" />
      <el-table-column  align="center" width="220px" label="操作">
        <template #default="scope">
          <a href="http://localhost:8080/?#/teacher/notice" @click="showNoticeDetail(scope.row)">详情</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 详情弹窗 -->
  <el-dialog
      v-model="detailDialogVisible"
      title="公告详情"
      width="50%"
  >
    <div>
      <h2 style="text-align: center; font-weight: bold;">{{ selectedNotice.title }}</h2>
      <div style="padding: 30px 50px;">
        <div style="padding-bottom: 20px; text-indent: 2em; text-align: left;">
          {{ selectedNotice.content }}
        </div>
        <div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;">
          <div>{{ selectedNotice.identity }}</div>
          <div>{{ selectedNotice.publishdt}}</div> <!-- 时间格式化 -->
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="detailDialogVisible = false">确认</el-button>
  </span>
  </el-dialog>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {ArrowRight, Plus} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/freshman";
import {ElDialog, ElMessage} from "element-plus";
onMounted(()=>{
  getNotice();
})
// 控制详情弹窗显示的变量
const detailDialogVisible = ref(false);

// 存储选中的公告详情
const selectedNotice = ref(null);
const showNoticeDetail = (row) => {
  selectedNotice.value = row;
  detailDialogVisible.value = true;
};
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const noticeInfo=ref([])
const getNotice=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    type:1,
    // 初始时不包含其他参数
  };
  request({
    url:'/notice/all',
    method:'get',
    params,
  }).then((req)=>{
    if (req.data.errorCode==200){
      noticeInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getNotice()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getNotice()
}

</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page {
  margin-left: 30%;
}
</style>